<html>

<head>
<title>008 效果</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//show([speed,[easing],[fn]]) 显示隐藏的匹配元素
	console.log("hello!")
	$("p").show("slow");
	$("p").show("slow",function(){
		console.log("Animation Done!")
	   $(this).text("Animation Done!");
	 });
	$("p").hide("slow");
	$("p").show(4000,function(){
		console.log("4000!")
	   $(this).text("4000!");
	 });

	//slideDown([speed],[easing],[fn]) 通过高度变化（向下增大）来动态显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
	//这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery1.3中，上下的padding和margin也会有动画，效果更流畅。
	$("p").slideDown("slow");
	$("p").slideUp("slow");

	var url = encodeURIComponent('MicroSD Memory Card 64GB Class10 100MB/S with Card Reader');
	console.log(url);

	//fadeIn 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选的触发一个回调函数。
	//这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
	$("p").fadeIn("fast",function(){ 
		$("p").fadeOut("slow");
	   	console.log("fadeIn Animation Done.");
	});

	//通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
	$("p").fadeOut("fast",function(){ 
	   console.log("fadeOut Animation Done.");
	});

	$(".btn1").click(function(){
		$("p").fadeOut()
	});
	$(".btn2").click(function(){
		$("p").fadeIn();
	});

	// 开始动画
	$("#go").click(function(){
	  $(".block").animate({left: '+200px'}, 5000);
	});

	// 当点击按钮后停止动画
	$("#stop").click(function(){
	  $(".block").stop();
	});
});

jQuery.fx.interval = 100;

$("input").click(function(){
  $("div").toggle( 3000 );
});
</script>
<style>
div { width:50px; height:30px; margin:5px; float:left;
      background:green; }
</style>	

</head>

<body>
	<p style="display: none">Hello</p>
	<p>这是一个段落。</p>
	<button class="btn1">淡出</button>
	<button class="btn2">淡入</button>

	<button id="go">Go</button> 
	<button id="stop">STOP!</button>
	<div class="block"></div>
	<button id="go">Go</button> 
	<button id="stop">STOP!</button>
	<div class="block"></div>

	<p><input type="button" value="Run"/></p>
	<div></div>
</body>

</html>
